<template>
  <div class="fxbase" :style="{ height: $store.state.screenH - 100 + 'px' }">
    <mt-navbar v-model="index" @click.native="changeSwipe" fixed>
      <mt-tab-item :id="el.id" v-for="el in navArr" :key="el.id">{{ el.title }}</mt-tab-item>
    </mt-navbar>
    <mt-swipe ref="swipe" :auto="0" :defaultIndex="indexSwipe" :showIndicators="false" class="swipe"
      @change="changeIndex">
      <mt-swipe-item v-for="el in navArr" :key="el.id">
        <ListType :dataType="el.dataType" v-if="index == el.id" />
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>
<script>
import ListType from "@/components/ListType";
export default {
  name: "fxbaseCom",
  data() {
    return {
      index: this.$store.state.navBarIndex,
      indexSwipe: this.$store.state.swiperIndex,
      navArr: [
        { id: "0", title: "脑洞大开", dataType: "nddk" },
        { id: "1", title: "都市异能", dataType: "dsyn" },
        { id: "2", title: "青春校园", dataType: "qcxy" },
        { id: "3", title: "恐怖小说", dataType: "kbxs" },
        { id: "4", title: "畅销经典", dataType: "cxjd" },
      ],
    };
  },
  mounted() { },
  methods: {
    changeSwipe() {
      this.indexSwipe = this.index - 0;
      this.$store.state.swiperIndex = this.index - 0;
      this.$refs.swipe.swipeItemCreated();
    },
    changeIndex(i) {
      this.index = i + "";
      this.$store.state.navBarIndex = i + "";
    },
  },
  components: {
    ListType,
  },
};
</script>
<style scoped lang="less">
div.fxbase {
  .swipe {
    margin-top: 50px;

  }
}
</style>
